<template>
  <div class="page-wrap">
    <div class="page-wrap-layout">
      <div class="page-wrap-header pt-24">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/interview' }">AI面试官</el-breadcrumb-item>
          <el-breadcrumb-item >{{ jobName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <item-component @onDrawer="onDrawer" :curItem="curItem" v-if="show"></item-component>
    </div>
  </div>
</template>

<script setup>
  import ItemComponent from './component/drawer.vue'
  import { Right, ArrowRight } from '@element-plus/icons-vue'
  import { useRouter, useRoute } from 'vue-router'
  import { ref, onMounted } from 'vue'
  import { getDetailInfo } from '@/api/api'
  const show = ref(false)
  const router = useRouter()
  const route = useRoute()
  const curItem = ref({})
  const jobName = ref('创建岗位')
  const onDrawer =() => { 
    router.push({
      path: '/interview'
    })
  }

  const getInit = () => {
    const { id } = route.query
    getDetailInfo({
      job_id: id
    }).then(res => {
      curItem.value = res.data
      show.value = true
    })
  }

  onMounted(() => {
    const { id } = route.query
    if (id) {
      getInit()
      jobName.value = '编辑岗位'
    } else {
      show.value = true
    }
  })
</script>

<style lang="scss" scoped>
  .page-wrap{
    padding-top: 52px;
    overflow: auto;
    background: #fff;
    min-height: 100%;
    &-layout{
      width: 996px;
      margin: 0 auto;
      background: #fff;
      overflow: hidden;
    }
  }
</style>